<!--
 * @Author: lwy 1245883359@qq.com
 * @Date: 2025-02-20 20:50:09
 * @LastEditors: lwy 1245883359@qq.com
 * @LastEditTime: 2025-03-02 12:52:32
 * @FilePath: \wangyu-new-hetong\src\views\system\rzApply\device-config.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-page-box">
    <div class="app-page">
      <Back label="设备信息" />
      <div class="plan-desc">
        <div class="plan-name">凯斯-PUMA2254-农用拖拉机(重型)</div>
      </div>
      <a-row>
        <a-form layout="inline" class="query-form" :model="queryForm">
          <a-col :span="8">
            <a-form-item label="设备单价：" name="purchasePrice">
              <a-input-number :controls="false" :min="0" style="width: 230rem" v-model:value="queryForm.purchasePrice" placeholder="请输入设备单价" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="设备数量：" name="number">
              <a-input-number :controls="false" :min="0" v-model:value="queryForm.number" addon-before="-" addon-after="+"></a-input-number>
            </a-form-item>
          </a-col>
        </a-form>
      </a-row>
      <a-button class="submit sure" @click="onSave">保存</a-button>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import Back from '/@/components/go-back/index.vue';
  import { useRoute, useRouter } from 'vue-router';
  import { rzApplyApi } from '/@/api/system/rzApply';
  import { useRzApplyStore } from '/@/store/modules/system/rzApply';
  let rzApplyStore = useRzApplyStore();
  const router = useRouter();
  const route = useRoute();
  const id = ref('');
  const queryForm = ref({
    purchasePrice: '',
    number: undefined,
  });
  const onSave = async () => {
    const params = rzApplyStore.getleaseHold;
    const res = await rzApplyApi.leaseHoldSaveOrUpdate({
      id: id.value,
      ...params,
      ...queryForm.value,
      sortIndex: id.value ? rzApplyStore.getViewDeviceInfo.sortIndex : await getSortIndex(),
    });
    if (res.code == 0) {
      router.go(-2);
      router.replace({ path: '/rzApply/device-list' });
    }
  };
  async function getSortIndex(role) {
    const res = await rzApplyApi.leaseHoldGetLeaseList({ bussNo: rzApplyStore.getBussNo });
    if (res.code == 0) {
      return Promise.resolve(res.data.length);
    }
    return Promise.reject(0);
  }
  onMounted(() => {
    console.log(rzApplyStore.getleaseHold);

    const query = route.query;
    id.value = query.id;
    if (query.id) {
      const info = rzApplyStore.getViewDeviceInfo;
      queryForm.value.purchasePrice = info.purchasePrice;
      queryForm.value.number = info.number;
    }
  });
</script>
<style scoped lang="less">
  .app-page {
    display: flex;
    flex-direction: column;
    padding: 20rem;
    position: relative;

    .plan-desc {
      width: 90%;
      height: 140rem;
      background-image: url(/@/assets/images/plan-bg.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: 37rem auto 50px;
      padding: 20px 20px 5px;
      box-sizing: border-box;
      position: relative;
      .plan-name {
        font-size: 30px;
        color: #ffffff;
      }
    }
    .ant-form {
      width: 90%;
      margin: auto;
    }
    .sure {
      width: 270rem;
      height: 42rem;
      background: #eb5f18;
      border-radius: 5rem;
      margin: auto;
    }
  }
</style>
